<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
        	<div class="layui-form-item">
        		<div class="layui-form-item layui-inline">
        			<label class="layui-form-label">菜单名称</label>
        			<div class="layui-input-inline">
        				<input type="text" name="title" placeholder="" class="layui-input">
        			</div>
        		</div>
        		<div class="layui-form-item layui-inline">
        			<button class="pear-btn pear-btn-md pear-btn-primary query" lay-submit lay-filter="user-query">
        				<i class="layui-icon layui-icon-search"></i>
        				查询
        			</button>
        			<button type="reset" class="pear-btn pear-btn-md">
        				<i class="layui-icon layui-icon-refresh"></i>
        				重置
        			</button>
        		</div>
        	</div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="power-table" lay-filter="power-table"></table>
    </div>
</div>

<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md permission" permission = "syspermission:add" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <!--<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>-->
	<button class="pear-btn pear-btn-success pear-btn-md " lay-event="expandAll">
	    <i class="layui-icon layui-icon-spread-left"></i>
	    展开
	</button>
	<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
	    <i class="layui-icon layui-icon-shrink-right"></i>
	    折叠
	</button>
</script>

<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm permission" permission = "syspermission:update" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm permission" permission = "syspermission:del" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>


<div style="display: none;">

    <div class="layer-top">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12" style="margin-top: 10px">

                <form class="layui-form" action="javascript:void(0);" lay-filter="example">

                    <input id="id" name="id" value="" style="display: none;">

                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单:</label>
                        <div class="layui-input-inline" style="width: 250px">
                            <div class="layui-input-block" style="margin-left: 0px">
                                <ul id="demoTree2" class="dtree" data-id="0"></ul>
                            </div>
                        </div>
                        <div class="layui-form-mid layui-word-aux">不选则默认为添加最顶级菜单</div>
                        <button class="pear-btn pear-btn-md" id="resPid">
                            <i class="layui-icon layui-icon-refresh"></i>
                            根节点
                        </button>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单/权限名:</label>
                        <div class="layui-input-block">
                            <input name="title" type="text" placeholder="请填写入菜单/权限名称" class="layui-input" lay-verify="required" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图标:</label>
                        <div class="layui-input-block">
                            <input name="icon" type="text" id="iconPicker" value="layui-icon-face-smile" lay-filter="iconPicker" class="hide">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">序号:</label>
                        <div class="layui-input-block" style="width: 200px">
                            <input name="sort" type="number" placeholder="请填写入序号" value="" class="layui-input" lay-verify="required|number">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态:</label>
                        <div class="layui-input-block">
                            <input name="available" type="checkbox" lay-skin="switch" lay-text="启用|禁用" checked>&nbsp;&nbsp;
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否展开:</label>
                        <div class="layui-input-block">
                            <input type="radio" name="open" value="1" title="是" checked>
                            <input type="radio" name="open" value="0" title="否">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">类型:</label>
                        <div class="layui-input-block">
                            <input type="radio" name="cate" lay-filter="cate" value="menu" title="菜单" checked>
                            <input type="radio" name="cate" lay-filter="cate" value="permission" title="权限">
                        </div>
                    </div>

                    <!--类型选择为菜单时为以下内容-->
                    <div id="menu">
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单类型:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="type" lay-filter="type" value="0" title="目录">
                                <input type="radio" name="type" lay-filter="type" value="1" title="菜单" checked>
                            </div>
                        </div>

                        <!--选择为菜单时-->
                        <div id="typeMenu">
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址:</label>
                                <div class="layui-input-block">
                                    <input name="href" type="text" placeholder="请填写链接地址" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">打开类型:</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="openType" value="_iframe" title="正常打开" checked>
                                    <input type="radio" name="openType" value="_blank" title="新建浏览器标签页">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--类型选择为权限时为以下内容-->
                    <div id="permission" style="display: none;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">权限编码:</label>
                            <div class="layui-input-block">
                                <input name="percode" type="text" placeholder="请填写权限编码" class="layui-input" />
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item" style="margin-top: 5px;padding-right:50px;float: right">
                        <button type="button" class="pear-btn pear-btn-success login" lay-submit
                                lay-filter="login">
                            保 存
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<script type="text/html" id="power-type">
    {{#if (d.type == '0') { }}
    <span>目录</span>
    {{# }else if(d.type == '1'){ }}
    <span>菜单</span>
    {{# }else if(d.type == null){ }}
    <span>按钮</span>
    {{# } }}
</script>

<script type="text/html" id="power-enable">
    <input type="checkbox" title="{{d.title}}" name="available" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"  {{ d.available== 1 ? 'checked' : '' }} />
</script>

<script type="text/html" id="user-sex">
    {{#if (d.sex == 1) { }}
    <span>男</span>
    {{# }else if(d.sex == 0){ }}
    <span>女</span>
    {{# } }}
</script>

<script type="text/html" id="user-login">
    {{#if (d.login == 0) { }}
    <span>在线</span>
    {{# }else if(d.sex == 1){ }}
    <span>离线</span>
    {{# } }}
</script>

<script type="text/html" id="user-createTime">
    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>

<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../../js/baseUrl.js"></script>
<script src="../../js/cookieUtils.js"></script>
<script src="../../component/pear/module/ajaxRequest.js"></script>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/permission.js"></script>
<script>
    layui.use(['table','form','jquery','treetable','drawer','dropdown','toast','ajaxRequest','dtree','icon'],function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let treetable = layui.treetable;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;
        let ajaxRequest = layui.ajaxRequest;
        let toast = layui.toast;
        let dtree = layui.dtree;
        let icon = layui.icon;

        let MODULE_PATH = "operate/";

        table = $.extend(table, { config: { checkName: 'checked' } });
        window.render = function(){
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                skin:'line',
                treeDefaultClose: true,
                toolbar:'#power-toolbar',
                elem: '#power-table',
                url: baseUrl + '/admin/permission/getSysPermissionList',
                page: false,
                cols: [
                    [
                    {type: 'checkbox'},
                    {field: 'title', minWidth: 200, title: '权限名称'},
                    {field: 'icon', title: '图标',templet:'#icon'},
                    {field: 'type', title: '权限类型',templet:'#power-type'},
                    {field: 'available', title: '状态',templet:'#power-enable'},
                    {field: 'percode', title: '权限编码'},
                    {field: 'sort', title: '排序'},
                    {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
                    ]
                ],
                done: function(res, curr, count) {
                    // 添加权限验证
                    validaPermission();
                    // validaRole();
                }
            });
        }
        render();

        $(function () {
            validaPermission();
        })


        /*form.on('submit(user-query)', function(data) {
            // console.log(data.field)
            treetable.render('power-table', {
                where: data.field
            })
            return false;
        });*/


        form.on('switch(user-enable)', function(obj) {
            var data = new Object();
            data.id = this.value;
            if (obj.elem.checked) {
                data.available = 1;
            }else {
                data.available = 0;
            }
            var res = ajaxRequest.sendPost("/admin/permission/updateStatus",data,false,true);
            if (res) {
                setTimeout(function() {
                    toast.success({title: 'Success',message: res.msg,position: 'topRight'});
                    // layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
                    layer.tips(this.title + ' 状态：' + obj.elem.checked, obj.othis);
                }, 1000);
            }
        });

        table.on('tool(power-table)',function(obj){
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })

        table.on('toolbar(power-table)', function(obj){
            if(obj.event === 'add'){
                window.add();
            } else if(obj.event === 'refresh'){
                window.refresh();
            } else if(obj.event === 'batchRemove'){
                window.batchRemove(obj);
            }  else if(obj.event === 'expandAll'){
				 treetable.expandAll("#power-table");
			} else if(obj.event === 'foldAll'){
				 treetable.foldAll("#power-table");
			}
        });

        window.add = function(){
            dtree.reload('demoTree2');
            // dtree.reload('demoTree2',{selectInitVal: "3"});
            drawer.open({
                direction: "right",
                dom: ".layer-top",
                distance: "70%"
            });
            form.val('example', {"id":"","title":"","href":"","percode":"","sort":""});
        };

        window.edit = function(obj){
            drawer.open({
                direction: "right",
                dom: ".layer-top",
                distance: "70%"
            });

            // 获取数据
            var res = ajaxRequest.sendPost("/admin/permission/getSysPermissionById",{'id':obj.data['id']},false,true);
            if (res){
                var data = res.data;
                dtree.reload('demoTree2',{selectInitVal: data.pid});

                var cate = data.cate;
                var type = data.type;
                if(cate=='menu'){
                    // 菜单
                    $("#menu").show();
                    $("#permission").hide();
                }else{
                    // 权限
                    $("#menu").hide();
                    $("#permission").show();
                }
                if(type=='0'){
                    // 目录
                    $("#typeMenu").hide();
                }else{
                    // 菜单
                    $("#typeMenu").show();
                }

                if (data.available == 1){
                    data.available = true;
                } else {
                    data.available = false;
                }
                form.val('example', data);
            }
        }

        window.remove = function(obj){
            layer.confirm('确定要删除该权限下的所有全新吗？', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();

                var res = ajaxRequest.sendPost("/admin/permission/delSysPermission",{'id':obj.data['id']},false,true);
                if (res){
                    layer.close(loading);
                    toast.success({title: 'Success',message: res.msg,position: 'topRight'});
                    $('.query').click();
                }
            });
        };
		
		window.batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中任何数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除该权限下的所有权限吗？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                var res = ajaxRequest.sendPost("/admin/permission/delSysPermissionIds",{'ids':ids},false,true);
                if (res){
                    layer.close(loading);
                    toast.success({title: 'Success',message: res.msg,position: 'topRight'});
                    $('.query').click();
                }
            });
		}

        // 树形下拉菜单
        $(function () {
            dtree.render({
                elem: "#demoTree2",
                initLevel: "1",
                method: 'get',
                url: baseUrl + "/admin/permission/getSysPermission",
                select: true
                // selectInitVal: "3", // 你可以在这里指定默认值
            });
        });

        // 重置为选择根节点
        $("#resPid").click(function () {
            dtree.reload("demoTree2",{
                selectInitVal: '0',
                selectTips: "重置为选择了根节点"
            });
        });

        // 图标选择
        icon.render({
            elem: '#iconPicker',
            style: 'color: #5FB878;',
            placeholder: '',
            isSplit: true,
            page: true,
            search: false,
            click: function(obj) {
                console.log(obj)
            },
            ready: function() {
                console.log(1)
            }
        });

        //此处即为 类型的 的监听事件
        form.on('radio(cate)', function(data){
            var cate = data.value;
            // console.log(cate);
            if(cate=='menu'){
                // 菜单
                $("#menu").show();
                $("#permission").hide();
            }else{
                // 权限
                $("#menu").hide();
                $("#permission").show();
            }
        });

        //此处即为 菜单类型的 的监听事件
        form.on('radio(type)', function(data){
            var type = data.value;
            // console.log(type);
            if(type=='0'){
                // 目录
                $("#typeMenu").hide();
            }else{
                // 菜单
                $("#typeMenu").show();
            }
        });

        // 保存
        form.on('submit(login)', function(data) {
            let formDate = data.field;
            var id = formDate.id;

            // 图标
            formDate.icon = "layui-icon "+formDate.icon;
            // 状态
            if (formDate.available == 'on'){
                formDate.available = 1;
            }else {
                formDate.available = 0;
            }
            // 父id
            if (formDate.demoTree2_select_nodeId) {
                formDate.pid = formDate.demoTree2_select_nodeId;
            }else {
                formDate.pid = 0;
            }
            // 打开方式和链接地址
            if (formDate.type != 1) {
                formDate.openType = '';
                formDate.href = '';
            }
            // 权限编码
            if (formDate.cate != 'permission'){
                formDate.percode = '';
            }else {
                formDate.type = '';
                formDate.openType = '';
                formDate.href = '';
            }
            // console.log(formDate);
            // 地址
            var result;
            if (id) {
                result = ajaxRequest.sendPost("/admin/permission/updateSysPermission",formDate,false,true);
            }else {
                result = ajaxRequest.sendPost("/admin/permission/addSysPermission",formDate,false,true);
            }
            // 结果处理
            if (result) {
                toast.success({title: 'Success',message: result.msg,position: 'topRight'});
                // 清空填写的信息
                form.val('example', {"id":"","title":"","href":"","percode":"","sort":""});
                $('.query').click();
            }
            return false;
        });
    })
</script>
</body>
</html>